const { defineConfig } = require('@vue/cli-service');
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = defineConfig({
  runtimeCompiler: true,
  transpileDependencies: true,
  lintOnSave: false, // 关闭 eslint 校验工具
  devServer: {
    proxy: {
      '/api': {
        target: 'http://gmall-h5-api.atguigu.cn',
      },
    },
  },
  css: {
    extract: true,  // 启用 CSS 提取
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#42b983'  // LESS 全局变量
          },
          javascriptEnabled: true  // 启用 JavaScript 计算 LESS 变量
        }
      }
    }
  },
  // Webpack 配置
  //Webpack 支持将代码按需拆分成多个文件，通过分离第三方库和应用代码，减少首次加载的文件大小。
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css'
      })
    ],
    optimization: {
      splitChunks: {
        chunks: 'all',  // 提取所有模块
        minSize: 30000, // 最小大小
        maxSize: 0,     // 禁止限制大小
        minChunks: 1,   // 最小公共模块
        maxAsyncRequests: 5, // 异步加载最大并发请求数
        maxInitialRequests: 3, // 初始加载最大请求数
      },
      minimizer: [
        new CssMinimizerPlugin()  // 压缩 CSS
      ]
    },
  },
});



